<template>
	<view class="contain">
		<view class="bg-white header pt-4">
			<view class="flex ">
				<view class="flex-col text-center flex-1">
					<text>93.8</text>
					<view>余额</view>
				</view>
				<view class="flex-col text-center flex-1">
					<text>106.2</text>
					<view>历史消费</view>
				</view>
			</view>
		</view>
		<view class="body bg-white rounded-2xl m-3 mt-[-4px] p-2 ">
			<view class="title   text-center ">
				消费记录
			</view>
			
			<view class="list">
			<view class="item flex m-2 p-2 items-center"   v-for="i in 8">
				<view   class="flex-col  flex-1">
					<view  class="text-gray-500">在线余额支付订单金额</view>
					<text class="text-gray-400 ">2024-02-2812:46:31</text>
				</view>
				<view class="text">
					-30
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
	.contain { 
		height: calc(100vh - 44px);
		background: #f2f2f2;
		border-top: 1px solid #ccc;

		.header {
			height: 18%;
			background: linear-gradient(to bottom, #2274e3, #f2f2f2);

			.flex-col {
				font-weight: 700;

				view {
					font-size: 12px;
					color: #4678f8;
				}

				text {
					color: #fc6768;
				}
			}
		}

		.body {
			height: calc(100vh - 44px - 24%);
			overflow: hidden;
			.title {
				color: #2a79e3; 
				
				.num{
					color: #ff6666;
				}
			}
			
			.list{
				height: 100%;
				overflow-y: auto;
			.item{ 
				font-size: 12px;
				border-top: 1px solid #ebebeb;
				 .text{
					 color: #ff6666;
					 font-size: 16px;
				 }
			}}
		}
	}
</style>